<template>
  <div>
    <navTop :headTitle="headTitle"></navTop>
    <div class="out_content">
      <p>出货单号：123123123(自动生成)</p>
      <p>代理人：张三166***40004</p>
      <p>出货商品列表：</p>
      <ul>
        <li>1.111</li>
        <li>2.111</li>
        <li>3.111</li>
      </ul>
      <p>扫描二维码</p>
      <p>确认出货</p>
    </div>
    <p class="a_p" @click.stop="showOutlist">查看出货单列表<i class="iconfont icon-you"></i></p>
    <transition name="slide-fade">
      <outList v-show="isshowout" :isshowout="this.showOutlist"></outList>
    </transition>
  </div>
</template>

<script>
import navTop from '~/components/common/navTop.vue';
import outList from '~/components/base/outList.vue';

export default {
  data() {
    return {
      headTitle: '商品出货',
      isshowout: false,
    };
  },
  components: {
    navTop,
    outList,
  },
  methods: {
    showOutlist() {
      this.isshowout = !this.isshowout;
    },
  },
};
</script>

<style lang="stylus" scoped>
.a_p
  padding-left 0.2rem
  height 0.8rem
  line-height 0.8rem
  background #fff
  margin-top 0.3rem
  box-shadow 0px 0px 3px 0px #ccc
  i
    float right
    padding-right 0.2rem
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.out_list
  margin-top 1rem
.out_content
  width 96%
  margin 0.2rem auto
  border 1px solid #f1f1f1
  box-shadow 0 0 1px #ccc
  ul
    width 96%
    margin 0.2rem auto
    padding-left 0.3rem
    li
      height 0.4rem
      line-height 0.4rem
  p
    height 0.6rem
    line-height 0.6rem
    padding-left 0.3rem
    font-size 0.25rem
    color #aaa
    &:first-child
      color black
      height 0.8rem
      line-height 0.8rem
      font-size 0.3rem
      border-bottom  1px solid #f1f1f1
      padding-left 0.2rem
    &:nth-child(5)
      color #26a2ff
      text-align center
      border 1px solid #ccc
      border-radius 0.1rem
      width 90%
      margin 0 auto
    &:last-child
      width 90%
      color #ffffff
      text-align center
      background #26a2ff
      border-radius 0.1rem
      margin 0.2rem auto
</style>

